import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { PageContiner, Continer, Image } from '@/components';
import { MODULE_NAME, getList } from './redux';
import ProTable from '@ant-design/pro-table';
import { Button, message } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import type { IOrganizingProp } from '@/sections/Organizing/index.d'
import type { ProColumns } from '@ant-design/pro-table';
import type { ITableListProp, ISearch, IPagination } from './index.d';
import Organizing from '@/sections/Organizing'

const columns: ProColumns<ITableListProp>[] = [{
  title: '学校',
  key: 'schoolName',
  dataIndex: 'schoolName',
  width: 150,
  align: 'center',
  search: false
}, {
  title: '班级',
  key: 'className',
  align: 'center',
  dataIndex: 'gradeClassName',
  width: 160,
  search: false
}, {
  title: '编号',
  key: 'sno',
  align: 'center',
  dataIndex: 'sno',
  valueType: 'text',
  width: 120,
}, {
  title: '姓名',
  key: 'name',
  align: 'center',
  dataIndex: 'name',
  valueType: 'text',
  width: 150,
}, {
  title: '证件号',
  key: 'idCard',
  align: 'center',
  valueType: 'text',
  width: 180,
  hideInTable: true
}, {
  title: '人脸识别照',
  align: 'center',
  key: 'hasStdImg',
  dataIndex: 'studentImageSmall',
  width: 120,
  valueType: 'select',
  request: async () => [{
    label: '全部',
    value: ''
  }, {
    label: '已上传',
    value: 1
  }, {
    label: '未上传',
    value: 0
  }],
  render: (text, record: any) => (
    <Image
      round
      block
      fit="cover"
      wrapperStyle={{ margin: '0 auto' }}
      src={record.studentImageSmall || 'http://'}
      preview={{ src: record.studentImage }}
      width="40px"
      height="40px"
    />
  )
}, {
  title: '制卡照',
  align: 'center',
  key: 'hasIdImg',
  dataIndex: 'idPhotoImageSmall',
  valueType: 'select',
  request: async () => [{
    label: '全部',
    value: ''
  }, {
    label: '已上传',
    value: 1
  }, {
    label: '未上传',
    value: 0
  }],
  width: 120,
  render: (text, record: any) => (
    <Image
      round
      fit="cover"
      block
      wrapperStyle={{ margin: '0 auto' }}
      src={record.idPhotoImageSmall || 'http://'}
      preview={{ src: record.idPhotoImage }}
      width="40px"
      height="40px"
    />
  )
}, {
  title: '联系电话',
  align: 'center',
  key: 'telephone',
  width: 150,
  dataIndex: 'telephone',
}, {
  title: '走读类型',
  align: 'center',
  key: 'resident',
  width: 80,
  dataIndex: 'residentChs',
  valueType: 'select',
  request: async () => [{
    label: '全部',
    value: ''
  }, {
    label: '走读',
    value: 0
  }, {
    label: '住校',
    value: 1
  }, {
    label: '半走读',
    value: 2
  }, {
    label: '其他',
    value: 3
  }],
}, {
  title: '管理账号总数',
  align: 'center',
  search: false,
  key: 'bindUserCounts',
  width: 100,
  dataIndex: 'bindUserCounts',
}];

const StudentInfo: React.FC = () => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState<boolean>(false);
  const [treeNode, setTreeNode] = useState<{ id: string; nodeType: string; } | null>(null);
  const [search, setSearch] = useState<ISearch>({});
  const { dataSource, total } = useSelector(state => state[MODULE_NAME].tableData);
  const [pagination, setPagination] = useState<IPagination>({
    page: 1,
    limit: 10
  });

  // 获取列表数据
  const getData = async (page: number, limit: number) => {
    setLoading(true)
    await dispatch(getList({
      page,
      limit,
      ...treeNode,
      ...search
    }))
    setLoading(false)
  }

  // 分页信息变更
  const paginationChange = (page: number, limit: number | undefined) => {
    setPagination({
      page,
      limit: limit || pagination.limit
    });

    getData(page, limit || pagination.limit)
  }

  // 搜索
  const onSearch = (params: ISearch) => {
    setPagination({
      page: 1,
      limit: pagination.limit
    })
    setSearch(params)
  }

  // 点击treeData
  const handleClickNode = (keys: string[], node: any) => {
    setPagination({
      page: 1,
      limit: pagination.limit
    })
    setTreeNode({
      id: keys[0],
      nodeType: node.nodeType
    });
  }

  // 导出表格数据
  const downloadSourceData = () => {
    message.warning('该功能正在开发中！')
  }

  useEffect(() => {
    getData(pagination.page, pagination.limit)
  }, [search, treeNode])

  return (
    <PageContiner hiddenBreadcrumb={false}>
      <ProTable<ITableListProp>
        headerTitle="学生列表"
        rowKey="id"
        loading={loading}
        columns={columns}
        bordered
        dataSource={dataSource}
        onSubmit={onSearch}
        onReset={() => onSearch({})}
        scroll={{
          x: 1330,
          y: 'calc(100vh)',
          scrollToFirstRowOnChange: true
        }}
        pagination={{
          "showSizeChanger": true,
          "showQuickJumper": true,
          current: pagination.page,
          pageSize: pagination.limit,
          total: total,
          onChange: paginationChange
        }}
        options={false}
        tableRender={(_, dom) => (
          <Continer
            search
            renderLeft={
              (prop: IOrganizingProp) => <Organizing
                {...prop}
                handleClickNode={handleClickNode}
              />
            }
          >
            {dom}
          </Continer>
        )}
        toolBarRender={() => [
          <Button key="out" onClick={downloadSourceData}>
            导出数据
            <DownloadOutlined />
          </Button>
        ]}
      />
    </PageContiner>
  )
}

export default StudentInfo
